<template>
  <div class="logo-features">
    <div class="mask" v-show="showCard" @click.self="showCard = false"></div>
    <div class="d-flex justify-center align-center">
      <Icon class="pointer" name="menu" size="28" @click.stop="showCard = !showCard"></Icon>
      <img class="logo pointer ml-1" src="/images/logo.png" alt="Fantasi" title="Fantasi" @click="reloadWeb" />
    </div>
    <div class="card" v-if="showCard">
      <div class="font-size-16 font-weight-500 line-height-140 gap-col-16 pb-4">
        <div v-if="isMobile" @click="toCategory" class="pointer">{{ $t('title.popularCategory') }}</div>
        <div v-if="isMobile" @click="toCreators" class="pointer">{{ $t('title.popularCreator') }}</div>
        <div @click="toBlog" class="pointer">{{ $t('title.blog') }}</div>
        <div @click="toAbout" class="pointer">{{ $t('title.about') }}</div>
        <div
          class="more-site d-flex align-center pointer mb-0"
          :class="{ 'bg-gray-x': moreSiteOpen, 'mb-2': moreSiteOpen }"
          @click="toggleMoreSite"
        >
          <div class="flex-grow-1">{{ $t('common.moreSite') }}</div>
          <Icon name="arrowDown" size="16" class="more-site-arrow" :class="{ open: moreSiteOpen }"></Icon>
        </div>
        <ul v-show="moreSiteOpen" class="links gap-col-16 font-size-12">
          <li v-for="link in friendLinks" :key="link.id">
            <Link :href="link.linkurl" @click="openFriendLink(link.linkurl, link.target)">{{ link.title }}</Link>
          </li>
        </ul>
      </div>
      <div class="gap-row-12">
        <a href="https://www.tiktok.com/@fantasi.one" target="_blank"><Icon size="30" name="tiktokRounded"></Icon></a>
        <a href="https://x.com/FantasiOne" target="_blank"><Icon size="30" name="twitterRounded"></Icon></a>
        <a href="https://www.instagram.com/fantasi.one" target="_blank"
          ><Icon size="30" name="instagramRounded"></Icon
        ></a>
      </div>
      <div class="my-2">
        <v-divider></v-divider>
      </div>
      <div class="font-size-12 font-weight-500 line-height-140 gap-col-16">
        <div @click="toLegal(`terms-of-service`)" class="pointer">{{ $t('title.tos') }}</div>
        <div @click="toLegal(`privacy-policy`)" class="pointer">{{ $t('title.pp') }}</div>
        <div @click="toLegal(`cookie-policy`)" class="pointer">{{ $t('title.cp') }}</div>
        <div @click="toLegal(`dmca`)" class="pointer">DMCA</div>
        <div @click="toLegal(`usc-statement`)" class="pointer">{{ $t('title.uscStmt') }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import Link from '@/components/common/Link.vue'

const showCard = ref(false)
const router = useRouter()
const moreSiteOpen = ref(false)

const appStore = useAppStore()
const { friendLinks, isMobile } = storeToRefs(appStore)

function reloadWeb() {
  window.location.href = window.location.origin
}
function toCategory() {
  router.push({
    path: '/category',
  })
}
function toCreators() {
  router.push({
    name: 'popular-creators',
  })
}
function toBlog() {
  router.push({
    name: 'blog',
  })
}
function toAbout() {
  router.push({
    name: 'about',
  })
}
function toLegal(pageKey) {
  router.push({ path: `mine/legal/${pageKey}` })
}

function toggleMoreSite() {
  moreSiteOpen.value = !moreSiteOpen.value
}

function openFriendLink(url, isOpenNewWindow) {
  window.open(url, isOpenNewWindow === 1 ? '_blank' : '_self')
}
</script>

<style lang="scss" scoped>
.logo-features {
  .logo {
    height: 1.1875rem;
  }
  .card {
    border-radius: 0.5rem;
    border: 1px solid #181925;
    background-color: rgba($color: #181925, $alpha: 0.75);
    width: 11.75rem;
    padding: 1rem;
    position: absolute;
    top: 2.625rem;
    z-index: 2;
  }
  .more-site {
    width: calc(100% + 2rem);
    margin-left: -1rem;
    padding: 0.25rem 1rem;
    .more-site-arrow {
      transition: rotate 0.15s;
      &.open {
        rotate: 180deg;
      }
    }
  }
  .links {
    list-style: none;
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
  }
}

.desktop {
  .logo-features {
    .card {
      top: 2rem;
    }
  }
}
</style>
